<template>
  <div>
    <el-button type="primary" size="small" @click="toggleFullscreen">
      全屏
    </el-button>
    <div class="main" ref="fullscreen" v-show="show">
      <div class="header">
        <header>二手房数据大屏</header>
        <div class="time">
          {{ nowTime }}
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="left-top panel">
            <p class="alltitle">不同城市的平均房源总价对比</p>
            <LeftTop />
          </div>
          <div class="left-bottom panel">
            <p class="alltitle">不同装修情况的分布</p>
            <LeftBottom />
          </div>
        </div>
        <div class="center">
          <div class="center-top panel">
            <span class="left">城市数量: {{ cities_count }}</span>
            <span class="right">房源数量: {{ count }}</span>
          </div>
          <div class="center-middle panel">
            <p class="alltitle">小区房源价格TOP10</p>
            <CenterTop />
          </div>
          <div class="center-bottom panel">
            <p class="alltitle">热门小区(城市)分析</p>
            <CenterBottom />
          </div>
        </div>
        <div class="right">
          <div class="right-top panel">
            <p class="alltitle">建筑类型占比</p>
            <RightTop />
          </div>
          <div class="right-bottom panel">
            <p class="alltitle">房源关注人数的漏斗分析</p>
            <RightBottom />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqCenterAPI } from '@/api/visual/index'

const nowTime = ref()
// 格式：XXXX年XX月XX日XX时XX分XX秒 星期X
const complement = (value: any) => {
  return value < 10 ? `0${value}` : value
}
const formateDate = (date: any) => {
  const time = new Date(date)
  const year = time.getFullYear()
  const month = complement(time.getMonth() + 1)
  const day = complement(time.getDate())
  const hour = complement(time.getHours())
  const minute = complement(time.getMinutes())
  const second = complement(time.getSeconds())
  const week = '星期' + '日一二三四五六'.charAt(time.getDay())
  return `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${week}`
}
let cities_count = ref()
let count = ref()
const getCenterData = async () => {
  let res = await reqCenterAPI()
  if (res.code === 200) {
    cities_count.value = res.data.cities_count
    count.value = res.data.count
  }
}
onMounted(() => {
  getCenterData()
  setInterval(() => {
    nowTime.value = formateDate(new Date())
  }, 1000)
  // 监听全屏变化事件
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})
const handleFullscreenChange = () => {
  if (!document.fullscreenElement) {
    // 判断是否退出全屏
    show.value = false // 退出全屏后隐藏大屏
  }
}
// 控制大屏的显示与隐藏
let show = ref(false)
// 全屏模式
let fullscreen = ref(null)
const toggleFullscreen = () => {
  show.value = true
  const el = fullscreen.value
  if (!document.fullscreenElement) {
    // 判断是否已经处于全屏模式
    el.requestFullscreen().catch((err) => {
      // 进入全屏模式
      console.log(`进入全屏模式失败：${err.message}`)
    })
  } else {
    document.exitFullscreen() // 退出全屏模式
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  background: url(@/assets/images/back.jpg);
  background-size: cover;
  .header {
    height: 6vh;
    background: url(@/assets/images/head_bg.png);
    header {
      font-size: 30px;
      color: #49bcf7;
      text-align: center;
      line-height: 6vh;
      position: relative;
    }
    .time {
      position: absolute;
      top: 10%;
      right: 5%;
      height: 100%;
      font-size: 15px;
      color: #49bcf7;
      font-family: electronicFont;
    }
  }
  .content {
    margin-top: 1vh;
    height: 93vh;
    display: flex;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      .left-top {
        flex: 1;
      }
      .left-bottom {
        flex: 1;
      }
    }
    .center {
      flex: 1.25;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      .center-top {
        display: flex;
        justify-content: space-between; /* 让内容分别对齐到两端 */
        align-items: center; /* 垂直居中对齐 */
        font-size: 30px;
        color: #49bcf7;
        flex: 0.25;
      }
      .center-middle {
        flex: 1.25;
      }
      .center-bottom {
        flex: 1.25;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .right-top {
        flex: 1;
      }
      .right-bottom {
        flex: 1;
      }
    }
  }
  .panel {
    /* 边框 */
    box-sizing: border-box;
    border: 2px solid red;
    border-image: url(@/assets/images/border.png) 51 38 21 132;
    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
    position: relative;
    // margin-bottom: 0.833rem;
    margin: 0.4165rem;
    .alltitle {
      position: absolute;
      top: -8%;
      left: -10%;
      color: #49bcf7;
    }
  }
  .middle {
    display: flex;
    justify-content: center; /* 将 .middle-left 和 .middle-right 居中 */
    align-items: center; /* 垂直居中 */
    color: #49bcf7;
    .middle-left,
    .middle-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .middle-content-top,
      .middle-content-bottom {
        flex: 1;
        display: flex;
        justify-content: center; /* 内容水平居中 */
        align-items: center; /* 内容垂直居中 */
        text-align: center; /* 确保文本居中 */
      }
      /* 让中间内容水平和垂直居中 */
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
